<template>
	<view class="content">
		<view class="index">
			<!-- 上部内容 -->
			<view class="top_content">
				<!-- 背景图片 -->
				<view class="bg">
					<image src="../../static/img/indexBackground.png" mode=""></image>
				</view>
				<!-- 标题头 -->
				<view class="head">
					<text class="title">{{title}}</text>
				</view>
				<!-- 搜索盒子 -->
				<view class="search">
					<view class="left">
						<text class="iconfont icon-ditu_dingwei_o"></text>
						<text class="place">首尔甜城</text>
					</view>
					<view class="right">
						<text class="iconfont icon-sousuo"></text>
						<input type="text" placeholder="搜索关键字" class="inp" placeholder-class="text" />
					</view>
				</view>
				<!-- 四个功能 -->
				<view class="navigation">
					<view class="navigation_list">
						<view class="navigation_li" @click="$jump('/pages/livePay/livePay')">
							<view class="top frist">
								<image src="../../static/img/1.png" mode=""></image>
							</view>
							<view class="bottom">
								生活缴费
							</view>
						</view>
						<view class="navigation_li" @click="$jump('/pages/Repairs/Repairs')">
							<view class="top second">
								<image src="../../static/img/2.png" mode=""></image>
							</view>
							<view class="bottom">
								物业报修
							</view>
						</view>
						<view class="navigation_li">
							<view class="top third">
								<image src="../../static/img/3.png" mode=""></image>
							</view>
							<view class="bottom">
								问题反馈
							</view>
						</view>
						<view class="navigation_li">
							<view class="top fourth">
								<image src="../../static/img/4.png" mode=""></image>
							</view>
							<view class="bottom">
								我要帮助
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 下部内容 -->
			<view class="bottom_content">
				<!-- 头条 -->
				<view class="news">
					<view class="news_head">
						<view class="left">
							<image src="../../static/img/5.png" mode=""></image>
						</view>
						<view class="center">
							<swiper class="center_swiper" autoplay="true" interval="2000" duration="500" vertical="true"
								circular="true">
								<swiper-item v-for="item in noticeList" :key="item.id" class="item">
									<text>{{item.title === '' ? '暂无标题' : item.title}}</text>
								</swiper-item>
							</swiper>
						</view>
						<view class="right">
							<text class="bor"></text>
							<text>更多</text>
							<text class="iconfont icon-dayuhao"></text>
						</view>
					</view>
					<view class="image_list">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration" @change="imgChange" :circular="circular">
							<swiper-item v-for="(item,index) in images" :key="index" @click="img">
								<image :src="item" mode=""></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<!-- 生活门店 -->
				<view class="life">
					<view class="life_head">
						生活门店
					</view>
					<view class="life_img">
						<image src="../../static/img/7.png" mode=""></image>
						<image src="../../static/img/8.png" mode=""></image>
					</view>
				</view>
				<!-- 资讯 -->
				<view class="message">
					<view class="message_head">
						<view class="left">
							资讯
						</view>
						<view class="right">
							<text class="iconfont icon-dayuhao" @click="$jump('/pages/newsList/newsList')"></text>
						</view>
					</view>
					<!-- 资讯列表 -->
					<view class="list" v-if="listState">
						<NewsList :newsList="newsList"></NewsList>
						<view class="state" v-if="state">
							{{stateText}}
						</view>
					</view>
					<view class="listState" v-else>
						暂时没有资讯
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Index,
	} from "../../static/api/apis.js"
	import NewsList from "../../components/NewsList.vue"
	export default {
		components: {
			NewsList
		},
		data() {
			return {
				state: false,
				stateText: "下拉加载更多",
				title: "智慧社区",
				images: ["https://img0.baidu.com/it/u=4014131506,533067158&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
					"https://img2.baidu.com/it/u=13467697,914465519&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
					"https://img2.baidu.com/it/u=3437912126,226505285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=360"
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				page: 1,
				psize: 4,
				newsList: [],
				index: 0,
				circular: true,
				counts: "",
				listState: true,
				noticeList: []
			}
		},
		created() {
			this.getNewsList()
		},
		onPullDownRefresh() {
			this.state = false
			this.newsList = []
			this.page = 1
			this.getNewsList()
		},
		// 下拉加载
		onReachBottom() {
			if (this.newsList.length < this.counts) {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.page++
				this.getNewsList()
			} else if (this.newsList.length === this.counts) {
				this.stateText = "已经到底了"
			}
		},
		onLoad() {
			this.getNewsList()
			this.getNotice()
		},
		methods: {
			// 图片变化
			imgChange(e) {
				this.index = e.detail.current
			},
			
			// 图片放大
			img() {
				uni.previewImage({
					current: this.images[this.index], // 当前显示图片的http链接
					urls: this.images // 需要预览的图片http链接列表
				});
			},
			// 获取小区公告
			async getNotice() {
				const res = await Index.newsList({
					type: 1
				})
				this.noticeList = res.data.list
				console.log("小区公告", this.noticeList)
			},
			// 获得资讯列表
			async getNewsList() {
				const res = await Index.newsList({
					page: this.page,
					psize: this.psize,
					type: 2
				})
				// 总数
				this.counts = res.data.counts
				if (this.counts > 0) {
					this.listState = true
					this.$settime(() => {
						// 有数据
						if (res.errCode === 10000 && res.data.list.length > 0) {
							this.newsList = this.newsList.concat(res.data.list)
							// 数据少于一页或只有一页
							if (res.data.pageCounts === 1) {
								this.stateText = "已经到底了"
							} else {
								this.stateText = "下拉加载更多"
							}
						}
						// 没数据
						else {
							this.stateText = "已经到底了"
						}
						this.state = true
						uni.stopPullDownRefresh()
						uni.hideLoading()
						console.log('资讯列表', this.newsList)
					})

				} else {
					this.listState = false
				}
			},
			},
		}
		
	
</script>

<style lang="less" scoped>
	@import url(../../static/css/index.less);
</style>
